<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>Bootstrap标签页案例</title>
</head>

<body>
    <div class="container">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#profile" data-toggle="tab">Profile</a></li>
            <li class="dropdown">
                <a href="#" id="myTabdrop1" class="dropdown-menu" data-toggle="dropdown">下拉菜单
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#one" tabindex="-1" data-toggle="tab">One</a>
                    </li>
                    <li>
                        <a href="#two" tabindex="-1" data-toggle="tab">Two</a>
                    </li>
                </ul>
            </li>
        </ul>
        <div id="MyTabConent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <p>Home！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
            </div>
            <div class="tab-pane fade " id="profile">
                <p>Profile！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
            </div>
            <div class="tab-pane fade" id="one">
                <p>One 欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
            </div>
            <div class="tab-pane fade" id="two">
                <p>Two 欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
                <p>Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里Hello你好吗！欢迎来到这里</p>
            </div>
        </div>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $("#myTab a:last").tab("show");
        $("#myTab li:eq(1) a").tab("show");
        $('a[data-toggle=tab]').on("show.bs.tab", function(e) {
            alert("切换了")
        })
    </script>
</body>

</html>